<template>
    <div class="father">
        <h2>我是父组件</h2>
        <div class="content">
            <Category>
                <template #s2>
                    <ul>
                        <li v-for="item in gameLists" :key="item.id">
                            {{item.content}}
                        </li>
                    </ul>
                </template>
                <template #s1>
                    <h2>热门游戏列表</h2>
                </template>
            </Category>
            <Category>
                <template v-slot:s2>
                    <img :src="imgUrl">
                </template>
                <template v-slot:s1>
                    <h2>今日美食城市</h2>
                </template>
            </Category>
            <Category>
                <template v-slot:s2>
                    <video :ref="videoUrl" controls></video>
                </template>
                <template v-slot:s1>
                    <h2>今日影视推荐</h2>
                </template>
            </Category>
        </div>
    </div>
</template>
<script lang="ts" setup name="Father">
import Category from "@/components/Category.vue";
import {reactive, ref} from "vue";
let gameLists = reactive([
    {id: 'fjlajfal001',content: '王者荣耀'},
    {id: 'fjlajfal002',content: '和平精英'},
    {id: 'fjlajfal003',content: '英雄联盟'}
])
let imgUrl = ref("https://z1.ax1x.com/11/19/piNxLo4.jpg")
let videoUrl = ref("https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
</script>
<style scoped>
.father {
    background-color: rgb(165,164,164);
    padding: 20px;
    border-radius: 10px;
}
.content {
    display: flex;
    justify-content: space-evenly;
}
</style>
